<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <div
    class="notification"
    (click)="markAsRead($event, notification)"
    [class.unread]="!notification.readAt">
    <ng-container *ngIf="notification.type === 'stories.assign'">
      <div class="notification-inner">
        <ng-template
          *ngTemplateOutlet="
            tplAvatar;
            context: { $implicit: notification.content.assignedBy }
          "></ng-template>

        <div class="notification-info">
          <p
            *ngIf="isAssignedCurrentUser(notification)"
            class="type"
            withInternalLink
            [innerHtml]="t(getTranslationKey(notification) + '.self', {
              username: notification.content.assignedBy.fullName,
              story: getStoryName(notification),
              storyUrl: getStoryUrl(notification) | getUrl,
            })"></p>
          <p
            *ngIf="!isAssignedCurrentUser(notification)"
            class="type"
            withInternalLink
            [innerHtml]="
              t(getTranslationKey(notification), {
                username: notification.content.assignedTo.fullName,
                story: getStoryName(notification),
                storyUrl: getStoryUrl(notification) | getUrl
              })
            "></p>
          <ng-template
            *ngTemplateOutlet="
              tplDate;
              context: { $implicit: notification }
            "></ng-template>
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="notification.type === 'stories.unassign'">
      <div class="notification-inner">
        <ng-template
          *ngTemplateOutlet="
            tplAvatar;
            context: { $implicit: notification.content.unassignedBy }
          "></ng-template>

        <div class="notification-info">
          <p
            *ngIf="isUnassignedCurrentUser(notification)"
            class="type"
            withInternalLink
            [innerHtml]="
            t(getTranslationKey(notification) + '.self', {
              username: notification.content.unassignedBy.fullName,
              story: getStoryName(notification),
              storyUrl: getStoryUrl(notification) | getUrl,
            })
          "></p>
          <p
            *ngIf="!isUnassignedCurrentUser(notification)"
            class="type"
            withInternalLink
            [innerHtml]="
            t(getTranslationKey(notification), {
              username: notification.content.unassignedTo.fullName,
              story: getStoryName(notification),
              storyUrl: getStoryUrl(notification) | getUrl,
            })
          "></p>
          <ng-template
            *ngTemplateOutlet="
              tplDate;
              context: { $implicit: notification }
            "></ng-template>
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="notification.type === 'stories.status_change'">
      <div class="notification-inner">
        <ng-template
          *ngTemplateOutlet="
            tplAvatar;
            context: { $implicit: notification.content.changedBy }
          "></ng-template>

        <div class="notification-info">
          <p
            class="type"
            withInternalLink
            [innerHtml]="
              t(getTranslationKey(notification), {
                username: notification.content.changedBy.fullName,
                story: getStoryName(notification),
                storyUrl: getStoryUrl(notification) | getUrl,
                status: notification.content.status
              })
            "></p>
          <ng-template
            *ngTemplateOutlet="
              tplDate;
              context: { $implicit: notification }
            "></ng-template>
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="notification.type === 'story_comment.create'">
      <div class="notification-inner">
        <ng-template
          *ngTemplateOutlet="
            tplAvatar;
            context: { $implicit: notification.content.commentedBy }
          "></ng-template>

        <div class="notification-info">
          <p
            class="type"
            withInternalLink
            [innerHtml]="
              t(getTranslationKey(notification), {
                username: notification.content.commentedBy.fullName,
                story: getStoryName(notification),
                storyUrl: getStoryUrl(notification) | getUrl,
              })
            "></p>

          <ng-template
            *ngTemplateOutlet="
              tplDate;
              context: { $implicit: notification }
            "></ng-template>
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="notification.type === 'stories.delete'">
      <div class="notification-inner">
        <ng-template
          *ngTemplateOutlet="
            tplAvatar;
            context: { $implicit: notification.content.deletedBy }
          "></ng-template>

        <div class="notification-info">
          <p
            class="type"
            withInternalLink
            [innerHtml]="
              t(getTranslationKey(notification), {
                username: notification.content.deletedBy.fullName,
                story: getStoryName(notification),
              })
            "></p>

          <ng-template
            *ngTemplateOutlet="
              tplDate;
              context: { $implicit: notification }
            "></ng-template>
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="notification.type === 'stories.workflow_change'">
      <div class="notification-inner">
        <ng-template
          *ngTemplateOutlet="
            tplAvatar;
            context: { $implicit: notification.content.changedBy }
          "></ng-template>

        <div class="notification-info">
          <p
            class="type"
            withInternalLink
            [innerHtml]="
              t(getTranslationKey(notification), {
                username: notification.content.changedBy.fullName,
                story: getStoryName(notification),
                storyUrl: getStoryUrl(notification) | getUrl,
                status: notification.content.status,
                workflow: notification.content.workflow
              })
            "></p>
          <ng-template
            *ngTemplateOutlet="
              tplDate;
              context: { $implicit: notification }
            "></ng-template>
        </div>
      </div>
    </ng-container>
  </div>

  <ng-template
    #tplAvatar
    let-user>
    <tg-user-avatar
      size="m"
      class="no-border"
      [color]="user.color"
      [user]="user"
      type="light"
      [rounded]="true"
      aria-hidden="true"></tg-user-avatar>
  </ng-template>

  <ng-template
    #tplDate
    let-notificaiton>
    <p
      class="date"
      [attr.title]="notification.createdAt | date: 'MMMM d, y - h:mm:ss a'">
      {{ notification.createdAt | dateDistance }}
    </p>
  </ng-template>
</ng-container>
